<template>
  <div class="rich">
    <Editor
      api-key="59wrp1o0hhz5o4iw13xmpmizyir175qksvleix6zslloenfa"
      v-model="content"
      :init="setting"
    />
  </div>
</template>
<script>
import tinymce from "tinymce/tinymce";

import Editor from "@tinymce/tinymce-vue";
import "tinymce/themes/silver/theme"; // 主题文件
import "tinymce/icons/default";
import "tinymce/models/dom";
import "tinymce/themes/silver";
import "tinymce/plugins/image";
import "tinymce/plugins/media";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/preview";
import "tinymce/plugins/code";
import "tinymce/plugins/link";
import "tinymce/plugins/advlist";
import "tinymce/plugins/codesample";
import "tinymce/plugins/fullscreen";
import "tinymce/plugins/searchreplace";
import "tinymce/plugins/autolink";
import "tinymce/plugins/directionality";
import "tinymce/plugins/visualblocks";
import "tinymce/plugins/visualchars";
import "tinymce/plugins/charmap";
import "tinymce/plugins/nonbreaking";
import "tinymce/plugins/insertdatetime";
import "tinymce/plugins/autosave";
import "tinymce/plugins/autoresize";

export default {
  name: "GoodsRich",
  components: { Editor },
  data() {
    return {
      content: "<h1>欲买桂花同载酒</h1>",
      setting: {
        min_height: 600,
        height: 600,
        promotion: false,
        paste_data_images: true,
        language_url: "/tinymce/langs/zh_CN.js",
        language: "zh_CN",
        skin_url: "tinymce/skins/ui/oxide",
        content_css: "tinymce/skins/content/default/content.css",
        plugins:
          "preview searchreplace autolink directionality  image link  code codesample table charmap  nonbreaking insertdatetime advlist lists wordcount autosave autoresize",
        toolbar:
          "code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link codesample | alignleft aligncenter alignright alignjustify outdent indent formatpainter | \
          styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \table image media charmap pagebreak insertdatetime | fullscreen preview",
        init_instance_callback: (editor) => {
          editor;
          // console.log("初始化完成：", editor);
        },
      },
    };
  },
  watch: {
    content: {
      handler(newValue) {
        this.$emit("value", newValue);
      },
      deep: true,
    },
  },
  mounted() {
    tinymce.init({});
  },
  methods: {},
};
</script>

<style scoped>
.rich {
  margin-top: 20px;
}
</style>